<template>
  <div>
    <div class="dis_flex">
      <div class="flex_l">
        <div class="flex_l">
          <div class="l_left">
            检查项目状态列表 ( <span>{{ checklist.length }}</span> / 20 )
          </div>
          <div class="l_right">
            <div
              v-for="(item, index) in checklist"
              :key="index"
              class="list_ch"
            >
              <div class="r_list">
								<!-- <i class="el-icon-check duihao"></i> -->
                <span>{{ item.names }}</span
                ><span>{{ item.content }}</span>
              </div>
            </div>
          </div>
          <div class="l_bottom">
            <div class="bot">高危提醒</div>
            <div class="hint">
              <el-input
                type="textarea"
                :autosize="{ minRows: 8, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="textarea2"
              >
              </el-input>
            </div>
          </div>
        </div>
      </div>

      <div class="flex_r">
        <!-- <div class="r_top_but">
          <el-button class="top_but" type="primary">分析生成</el-button>
          <el-button
            class="top_but"
            type="warning"
            @click="dialogFormVisible = true"
            >健康指导库</el-button
          >
        </div> -->
        <div class="l_text">
					<div class="examine">
						<h3><span>体检号：220010211</span><span>姓名：章凯</span>性别：女</span><span>年龄：25 岁</span><span>合同名称：</span></h3>
          <el-table
						:data="tableData1"
						border
						:header-cell-style="{background:'#02A7F0',color:'#000'}"
						style="width: 100%">
						<el-table-column
							prop="depart"
							label="科室名称">
						</el-table-column>
						<el-table-column
							prop="content"
							label="检查内容">
						</el-table-column>
						<el-table-column
							prop="yichang"
							label="异常结果">
						</el-table-column>
					</el-table>
					<div class="title5">
						<el-button @click="dialogFormVisible1 = true">添加结论</el-button>诊断结论
					</div>
					<el-table
						:data="tableData2"
						border
						:header-cell-style="{background:'#00FFFF',color:'#000'}"
						style="width: 100%">
						<el-table-column
							prop="id"
							label="序号">
						</el-table-column>
						<el-table-column
							prop="result"
							label="结论及建议">
						</el-table-column>
					</el-table>
					<el-form :inline="true" :model="firstmedical" class="demo-form-inline mt-20">
						<div>
							<el-form-item label="复检医生">
								<el-select v-model="firstmedical.name" placeholder="王凯">
									<el-option label="王凯" value="wangkai"></el-option>
									<el-option label="王凯" value="wangkai"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="复检时间">
								<el-input v-model="firstmedical.date" clearable></el-input>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="初检医生">
								<el-select v-model="firstmedical.name" placeholder="王凯">
									<el-option label="王凯" value="wangkai"></el-option>
									<el-option label="王凯" value="wangkai"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="初检时间">
								<el-input v-model="firstmedical.date" clearable></el-input>
							</el-form-item>
						</div>
						<el-form-item>
							<el-button type="success" @click="onSubmit">查看初检结论</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">报告预览</el-button>
						</el-form-item>
						<el-form-item style="margin-left: 100px;">
							<el-button type="warning" @click="onSubmit">提交</el-button>
						</el-form-item>
					</el-form>
					</div>
				</div>
      </div>
    </div>

    <el-dialog
      title="诊断结果库"
      :visible.sync="dialogFormVisible"
      width="1200px"
      class="top_dialog"
    >
      <el-form
        :model="form"
        label-position="left"
        label-width="80px"
        :inline="true"
      >
        <div class="info">
          <div class="info-l"></div>
          <div class="info-r">
            <div class="info_form">
              <el-form-item label="查找内容">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary">查找</el-button>
              </el-form-item>
              <el-form-item class="info_checkbox" label="">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox
                    label="显示所有诊断结果"
                    name="type"
                  ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="content" label="诊断结论内容">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >保 存</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
		<el-dialog
			title="选择异常结论库"
			width="70%"
			:visible.sync="dialogFormVisible1">
		  <el-form :inline="true" :model="form" class="demo-form-inline">
		    <el-form-item label="" :label-width="formLabelWidth">
		      <el-input v-model="form.words" autocomplete="off" placeholder="输入关键词"></el-input>
		    </el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
		  </el-form>
			<el-table
				ref="multipleTable"
				:data="tableData3"
				border
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					prop="citiao"
					label="常用结果词条"
					width="120">
				</el-table-column>
				<el-table-column
					prop="jiedu"
					label="异常解读"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column
					prop="zhidao"
					label="健康指导"
					show-overflow-tooltip>
				</el-table-column>
			</el-table>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
		  </div>
		</el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { uploadImgToBase64 } from "../../common/utils/upload64.js";
export default {
  data() {
    return {
			// 异常结果库
			tableData3: [{
				citiao: "词条",
				jiedu: "解读",
				zhidao: "指导"
			}],
			// 上表格
			tableData1: [{
				depart: "内科",
				contetnt: "一般检查",
				yichang: "无"
			}],
			// 诊断结论
			tableData2: [{
				id: 1,
				result: "正常"
			}],
			// 初检医生
			firstmedical: {
				name: "",
				date: "2022-04-10"
			},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        type: 123,
      },
      titleindex: 0,
      tableData: [
        {
          content:
            "按疾病的严重程度排序；如严重程度类似，则按照内科，外科，妇科，五官科的顺序排序",
        },
        {
          content: "白细胞增多常见于炎性感染、出血、中毒、白血病等。",
        },
        {
          content: "TCT检查:非典型鳞状细胞，不能明确意义（ASC-US）",
        },
        {
          content: "双侧卵巢测值縮小",
        },
        {
          content: "血红蛋白浓度（HGB）降低",
        },
      ],
      checklist: [
        {
          names: "一般检查",
          content: "重点关注3项",
        },
        {
          names: "内科",
        },
        {
          names: "外科",
          content: "重点关注3项",
        },
        {
          names: "耳鼻喉科",
        },
        {
          names: "放射科",
          content: "重点关注3项",
        },
        {
          names: "心电图",
        },
        {
          names: "血常规",
        },
        {
          names: "尿常规",
          content: "重点关注3项",
        },
        {
          names: "肺癌B超",
        },
      ],
      // examineList:[
      // 	{
      // 		id:0,
      // 		num:1,
      // 		names:'一般检查',
      // 		message:{
      // 			weight:'160kg',
      // 			exponent:'110',
      // 		},
      // 		exponented:'140',
      // 	},
      // 	{
      // 		id:1,
      // 		num:2,
      // 		names:'血常规',
      // 		numberlist:[
      // 		{
      // 		number:'白细胞',
      // 		message:'160kg',
      // 		},
      // 		{
      // 		number1:'正常指数',
      // 		message:'110',
      // 		},
      // 		],
      // 		exponented:'140',
      // 	}
      // ]
    };
  },
  methods: {
    huitui() {
      this.$router.go(-1);
    },
    // 右侧title事件
    gettitle(row) {
      this.titleindex = row;
    },
  },
};
</script>

<style scoped>
.mt-20 {
	margin-top: 20px;
}
.dis_flex {
  display: flex;
}

.l_top_but {
  display: flex;
}

.flex_l {
  /* width: 48% !important; */
  flex-shrink: 0;
  padding-right: 1%;
  padding-left: 1%;
  padding-top: 10px;
}

.flex_r {
  width: 49% !important;
  flex-shrink: 0;
  padding-left: 1%;
}

.r_title_item {
  width: 150px;
  height: 30px;
  line-height: 40px;
  margin-left: 10px;
  font-size: 14px;
}

.r_title_item div:nth-child(2) {
  width: 100%;
  height: 2px;
}

.r_title_item div {
  text-align: center;
}

.l_title_item_active {
  font-weight: 600;
}

.l_title_item_active div:nth-child(2) {
  background: rgb(113, 157, 240);
}

.r_top_but {
  display: flex;
  justify-content: flex-end;
}

.top_but {
  width: 120px;
  margin-left: 30px;
}

.l_text {
  line-height: 40px;
}

.l_two_table {
  width: 100%;
  background-color: white;
  height: 640px;
  overflow: hidden;
  overflow-y: auto;
  padding-left: 25px;
  padding-top: 10px;
}

.table_row {
  padding-top: 10px;
  padding-bottom: 40px;
}

.table_column_in {
  display: flex;
}

.table_column {
  margin-left: 30px;
}

.table_value {
  width: 300px;
}

.table-but {
  padding-top: 10px;
}

.table_row .el-divider--horizontal {
  margin-top: 15px;
}

.l_two_table > h3 {
  margin-left: 20px;
}

.top_one {
  display: flex;
  font-size: 26px;
  font-weight: 600;
  justify-content: space-between;
}

.divider {
  margin-top: 15px;
  margin-bottom: 15px;
}

.top_one div {
  display: flex;
  width: 400px;
}

.top_one div:nth-child(3) {
  display: flex;
  justify-content: flex-end;
}

.info {
  display: flex;
}

.info-l {
  width: 20%;
  height: 500px;
  border: 1px solid #000000;
}

.info_checkbox {
  padding-left: 300px;
}

.info-r {
  margin-left: 30px;
}
.l_left {
  color: #7f7f7f;
  font-weight: bold;
  height: 36px;
}
.l_left > span {
  color: #d9001b;
}
.l_right {
  background: #f2f2f2;
  height: 100%;
  padding: 10px;
}
.r_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
  color: #666666;
}
.r_list > span:first-child:hover {
  color: #2f9688;
  font-weight: bold;
}
.r_list > span:nth-child(2) {
  color: #d9001b;
}
.r_list > span:nth-child(2):hover {
  color: #2f9688;
  font-weight: bold;
}
.r_list > span {
  display: inline-block;
  width: 100%;
}
.l_bottom {
  margin-top: 30px;
}
.l_bottom > .bot {
  color: #ec808d;
  line-height: 35px;
}
.hint {
  width: 310px;
  /* height: 500px; */
  /* background: #ffffff; */
}
.examine {
  padding: 30px 20px;
  background: #ffffff;
  border: 1px solid #cccccc;
	width:900px;
}
.mes_t {
  padding: 5px 0px;
  border-bottom: 1px solid black;
  /* width: 300px; */
}
.mes_two {
	display: flex;
	width:500px;
	margin-right: 50px;
	justify-content: space-between;
}
.item_box {
  display: flex;
	justify-content: space-between;
}
.item_input{
	margin-top: 10px;
}
.item_bot{
	/* display: flex; */
	/* margin-left: 50px; */
}
.duihao {
	margin-right: 10px;
	color: #d9001b;
}
.l_text h3 {
	padding: 15px 10px;
	font-size: 16px;
	font-weight: normal;
	background-color: #E5F6FE;
}
.l_text h3 span {
	margin-right: 30px;
}
.title5 {
	position: relative;
	margin-top: 20px;
	padding: 8px 0;
	text-align: center;
	background-color: #F2F2F2;
}
.title5 button {
	top: 8px;
	left: 8px;
	position: absolute;
}
</style>
